<template>
  <div class="app-container home">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in items" :key="item">
        <img :src="item.img" style="width: 1680px;" />
      </el-carousel-item>
    </el-carousel>

    <el-row>
      <el-col :span="8" v-for="o in pros" :key="o">
        <el-card :body-style="{ padding: '5px' }">
          <img :src=o.proImg class="image">
          <div style="padding: 10px;">
            <span>{{o.proName}}</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
              <el-button type="primary" class="button" @click="dealwith(o)">立即办理</el-button>
              <el-button type="primary" class="button" @click="dialogVisible1(o)">查看详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加或修改用户配置对话框 -->
    <div>
      <el-dialog :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
        <span>
          <el-descriptions class="margin-top" :pro="pro" :column="3" :size="size" border>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                产品编号:
              </template>
              {{pro.proId}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                产品名称:
              </template>
              {{pro.proName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                贷款类型:
              </template>
              {{pro.proType}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                放款方式:
              </template>
              {{pro.proLoanTypes}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                还款方式:
              </template>
              {{pro.repaymentTypes}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                贷款期限:
              </template>
              {{pro.loanTerms}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                产品利率:
              </template>
              {{pro.proRate}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                产品亮点:
              </template>
              {{pro.proHigLight}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                最高放款额度:
              </template>
              {{pro.loanHigMoney}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                产品描述:
              </template>
              {{pro.proDescri}}
            </el-descriptions-item>
          </el-descriptions>
        </span>
        
      </el-dialog>

    </div>
  </div>
</template>
<script>
import findAll from '@/api/pro';
export default {
  name: "Index",
  data() {
    return {

      size: '',
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 是否显示弹出层
      dialogVisible: false,
      // 版本号
      version: "3.8.3",
      pros: [],
      pro: [],
      items: [
        { img: 'https://ts1.cn.mm.bing.net/th/id/R-C.a7305058290d93d20b48f374a180204c?rik=nGeAidh%2f%2bDhuZA&riu=http%3a%2f%2fjr.aijianyun.com%2fimages%2fswiper_img1.jpg&ehk=z%2fWmHVBXWG%2fagA%2fdnbSOgmIRfBSnMofWSI85nbeKI90%3d&risl=&pid=ImgRaw&r=0' },
        { img: 'https://ts1.cn.mm.bing.net/th/id/R-C.8a97088ba5d4fa11a9be4426d0265374?rik=GqkvBz%2bHhFonRw&riu=http%3a%2f%2fjr.aijianyun.com%2fimages%2fswiper_img2.jpg&ehk=JeGa7Xjubh310OtmdhTevlGNyY1GKB7pL4MGWQFtyaA%3d&risl=&pid=ImgRaw&r=0' },
        { img: 'https://ts1.cn.mm.bing.net/th/id/R-C.0f89e47a0bbe6778c9bc47ff5db3a9a0?rik=Q%2f0pV7iK3mN02Q&riu=http%3a%2f%2fjr.aijianyun.com%2fimages%2fswiper_img3.jpg&ehk=LA46sLKPsWuIojJ9qHlwbxc2lLl%2bNDkmjdpVQgzKQF4%3d&risl=&pid=ImgRaw&r=0' },
        { img: 'https://img.zcool.cn/community/01639e58edc0d5a8012049ef293221.jpg@1280w_1l_2o_100sh.jpg' },
      ]
    };
  },
  //钩子函数，渲染出来的时候，请求后台查询数据
  created() {
    //查询所有产品
    this.initProList();
  },
  methods: {
    dealwith(o) {
      console.log(o);
      this.$router.push({name: '/loanApply1', params: {name: o}})
       
  },
  dialogVisible1(o) {
    console.log(o);
    this.pro = o;
    this.dialogVisible = true;
  },
  initProList() {
    findAll().then(res => {
      console.log(res.data[0].pro_img);
      console.log(res);
      this.pros = res.data;
    }).catch();
  },
  goTarget(href) {
    window.open(href, "_blank");
  },
},

};
</script>

<style scoped lang="scss">
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 10px;
  float: right;
  margin-right: 60px;
}

.image {

  width: 400px;
  height: 320px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 100px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}











.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }






  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }


}
</style>

